﻿layui.define(['jquery'], function (exports) {
    var $ = layui.$;

    var SlideVerify = function (options) {
        this.options = $.extend({}, SlideVerify.DEFAULTS, options);
        this.$elem = $(this.options.elem);
        this.init();
    };
    SlideVerify.DEFAULTS = {
        elem: '',  // 需要添加滑动验证的元素选择器
        id: '',
        slt_left:0,
        onSuccess: function () { }  // 验证成功的回调函数
    };

    SlideVerify.prototype.refresh = function () {
        var _that = this;
        $.getJSON("api/Login/VerifyImg", function (r) {
            _that.options.id = r.data.id;
            _that.options.slt_left = r.data.left;
            $(".org")[0].src = 'data:image/png;base64,' + r.data.item1;
            $(".slt")[0].src = 'data:image/png;base64,' + r.data.item2;
            _that.$elem.find('.modal-content').show();
        })
    }

    SlideVerify.prototype.init = function () {
        var _this = this;
        let html = `     <div class="modal-content" style="display:none">
        <div style="width: 400px; margin: 0 auto; position: relative; user-select:none;">
            <img class='org' src="" style="width: 400px; height: 250px; margin-bottom:5px;border: 1px solid rgb(82, 204, 186)" />
            <img class='slt' src="" style="position: absolute; width: 50px; height: 50px;z-index:2; top: 100px;left:30px;border: 1px solid #68D4F7" />
            <div style="position: absolute; width: 400px; height: 250px; top: 0;left:0; background-color: rgba(0, 0, 0, 0.01);z-index:2;">
                <a style="position: absolute; right: 2px; top: 2px; background: rgba(0,0,0,.12);padding: 0px 2px;z-index:4;" onMouseOver="this.style.background='rgba(0,0,0,.2)'" onMouseOut="this.style.background='rgba(0,0,0,.12)'" id="refresh_img">
                    <svg fill="#FFF" width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10,4 C12.0559549,4 13.9131832,5.04358655 15.0015086,6.68322231 L15,5.5 C15,5.22385763 15.2238576,5 15.5,5 C15.7761424,5 16,5.22385763 16,5.5 L16,8.5 C16,8.77614237 15.7761424,9 15.5,9 L12.5,9 C12.2238576,9 12,8.77614237 12,8.5 C12,8.22385763 12.2238576,8 12.5,8 L14.5842317,8.00000341 C13.7999308,6.20218044 12.0143541,5 10,5 C7.23857625,5 5,7.23857625 5,10 C5,12.7614237 7.23857625,15 10,15 C11.749756,15 13.3431487,14.0944653 14.2500463,12.6352662 C14.3958113,12.4007302 14.7041063,12.328767 14.9386423,12.4745321 C15.1731784,12.6202971 15.2451415,12.9285921 15.0993765,13.1631281 C14.0118542,14.9129524 12.0990688,16 10,16 C6.6862915,16 4,13.3137085 4,10 C4,6.6862915 6.6862915,4 10,4 Z" fill-rule="nonzero"></path>
                    </svg>
                </a>
                <div style="position: absolute; width: 400px; height: 250px; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); z-index: 3; display: flex; align-items: center; justify-content: center; flex-direction: column;display:none" id="verifyfail">
                    <div style="width: 28px; height: 28px; margin: 0 auto;color:#fff">
                        <svg  width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><g  stroke="#fff" stroke-width="1.5" fill="none" fill-rule="evenodd"><circle  cx="14" cy="14" r="13.25"></circle><path  stroke-linecap="round" stroke-linejoin="round" d="M8.75 8.75l10.5 10.5M19.25 8.75l-10.5 10.5"></path></g></svg>
                        </div>
                    <div style="color: #fff; font-size: 15px; padding: 10px; max-width: 200px; text-align: center; ">验证未通过，拖动滑块将悬浮图像正确合并</div>
                </div>
            </div>
            <div class="slider-container" style="position:relative;width:400px;height:50px;background-color:rgb(238, 238, 238);overflow:hidden;border-radius: 2px;border: 1px solid #dcdfe6;">
                <div class="slider" style="position: absolute;top: 0;left: 0;width: 50px;height: 50px;background: rgb(255,255,255);border-radius: 2px;cursor: pointer;z-index: 2;">
                <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="819" style="width: 16px; height: 16px;position: absolute;top: 50%;left: 50%; transform: translate(-50%, -50%);"><path data-v-bfef64c6="" d="M500.864 545.728a47.744 47.744 0 0 0 6.72-48.896 24.704 24.704 0 0 0-4.48-8.384L240.256 193.088a34.24 34.24 0 0 0-28.608-17.408 34.24 34.24 0 0 0-25.856 12.864 46.592 46.592 0 0 0 0 59.52l238.08 264.512-238.08 264.512a46.592 46.592 0 0 0-1.088 59.52 32 32 0 0 0 50.56 0l265.6-290.88z" p-id="820"></path><path d="M523.84 248.064l236.992 264.512-238.08 264.512a46.592 46.592 0 0 0 0 59.52 32 32 0 0 0 50.56 0l265.6-292.608a47.744 47.744 0 0 0 6.72-48.832 24.704 24.704 0 0 0-4.48-8.448L578.304 191.36a34.24 34.24 0 0 0-55.552-2.816 46.592 46.592 0 0 0 1.088 59.52z" p-id="821"></path></svg>
                </div>
                <div class="b_slider" style="position: absolute;top: 0;left: 0; width: 0px;height: 50px;background-color: #76C61D;border-radius: 2px;cursor: pointer;z-index: 2;"></div>
                <div class="slider-label" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #333;font-size: 14px;font-weight: bold;">按住滑动拖动</div>
            </div>
        </div>
    </div>`;
        this.$elem.append(html);

        //滑动框
        this.$bar = this.$elem.find('.slider-container');
        //滑动按钮
        this.$btn = this.$elem.find('.slider');
        //滑动图片
        this.$slt = this.$elem.find('.slt');
        //滑动背景
        this.$btnbagr = this.$elem.find('.b_slider');
        //刷新按钮
        this.$refresh_img = this.$elem.find('#refresh_img');
        this.$btn.on('mousedown', function (e) {
            _this.startDrag(e);
        }).on('touchstart', function (e) {
            _this.startDrag(e);
        });
        var _that = this;
        var img_data = {};
        this.$refresh_img.on('click', function (e) {
            _that.dragging = false;
            _that.$slt.css('left', 30);
            _that.$btn.css('left', 0);
            _that.$btnbagr.css('width', 0);
            _that.$bar.css('background-color', "rgb(238, 238, 238)");
            document.querySelector('.slider-label').style.display = 'block';
            document.querySelector('#verifyfail').style.display = 'none';
            _that.$bar.css('border', "1px solid #dcdfe6");
            _that.$bar.css('background-color', "rgb(238, 238, 238)");
            _that.$btn.css('background-color', "rgb(255,255,255)");
            _that.refresh();
        })
        _that.refresh();
    };
    //开始拖动
    SlideVerify.prototype.startDrag = function (e) {
        e.preventDefault();
        if (this.hasOwnProperty("dragging") && this.dragging ) return;

        var _this = this;
        this.dragging = true;
        this.startX = e.pageX || e.clientX || e.touches[0].pageX;
    
        this.$elem.on('mousemove', function (e) {
            _this.drag(e);
        }).on('touchmove', function (e) {
            _this.drag(e);
        });
        this.$elem.on('touchend', function (e) {
            _this.endDrag(e);
        }).on('mouseup', function (e) {
            _this.endDrag(e);
        });
    };
    SlideVerify.prototype.drag = function (e) {
        if (!this.dragging) return;

        document.querySelector('.slider-label').style.display = 'none';

        var x = e.pageX || e.clientX || e.touches[0].pageX;;
        var offsetX = x - this.startX;
        var maxOffsetX = this.$bar.width() - this.$btn.width();

        if (offsetX < 0) offsetX = 0;
        if (offsetX > maxOffsetX) offsetX = maxOffsetX;

        this.$slt.css('left', offsetX);
        this.$btn.css('left', offsetX);
        this.$btnbagr.css('width', offsetX);
    };

    SlideVerify.prototype.endDrag = function (e) {
        if (!this.dragging) return;

        this.$elem.off('touchmove');
        this.$elem.off('mousemove');
        this.$elem.off('touchend');
        this.$elem.off('mouseup');

        var x = e.pageX || e.clientX;
        var offsetX = x - this.startX;
        //全部距离
        var maxOffsetX = this.$bar.width() - this.$btn.width();
        
        if (offsetX > this.options.slt_left - 5 && offsetX < this.options.slt_left + 5) {
            //this.$slt.css('left', maxOffsetX);
            //this.$btn.css('left', maxOffsetX);
            //this.$btnbagr.css('width', 0);
            //this.$bar.css('border', "1px solid #52CCBA");
            //this.$bar.css('background-color', "#D2F4EF");
            this.$btn.css('background-color', "#52CCBA");
            console.log(e.handleObj.type)
            //this.$btn.attr('draggable', 'true');
            this.options.onSuccess();
        } else {
            document.querySelector('#verifyfail').style.display = 'flex';
            setTimeout(() => {
                this.dragging = false;
                this.$btn.css('left', 0);
                this.$slt.css('left', 30);
                this.$btnbagr.css('width', 0);
                this.$bar.css('background-color', "rgb(238, 238, 238)");
                document.querySelector('.slider-label').style.display = 'block';
                document.querySelector('#verifyfail').style.display = 'none';
            }, 700)
        }
        e.stopPropagation();
    };



//    class SlideVerify {
//        constructor(options) {
//            debugger
//            this.options = $.extend({}, SlideVerify.DEFAULTS, options);
//            this.$elem = $(this.options.elem);
//            this.init();
//        }
//        static DEFAULTS = {
//            elem: '',  // 需要添加滑动验证的元素选择器
//            onSuccess: function () { }  // 验证成功的回调函数
//        };

//        init = function () {
//            var _this = this;
//            this.$elem.append('<div class="slide-verify-bar"><div class="slide-verify-btn"></div></div>');

//            this.$bar = this.$elem.find('.slide-verify-bar');
//            this.$btn = this.$elem.find('.slide-verify-btn');

//            this.$btn.on('mousedown', function (e) {
//                _this.startDrag(e);
//            });

//            $(document).on('mousemove', function (e) {
//                _this.drag(e);
//            }).on('mouseup', function (e) {
//                _this.endDrag(e);
//            });
//        };
//    });


    exports('slideverify', SlideVerify);
})